<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>登录页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">

<link href="css/style.css" th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
<link href="css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet"/>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/font.css" type="text/css" th:href="@{/css/font.css}"/>
<link href="css/font-awesome.css" rel="stylesheet" th:href="@{/css/font-awesome.css}">

<style>
	#loginForm{
		padding: 10px;
	}
	#loginForm>*{
		margin: 10px;
	}
	#loginForm #password{
		margin-left: 25px;
	}
	.error{
		font-size: 14px;
		color: red;
	}
</style>
</head>
<body>
<div class="log-w3">
<div class="w3layouts-main">
	<h2>登录</h2>
	<p style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
		<form id="loginForm" method="post" action="index.html" th:action="@{/user/login}">
			<label for="role">角色：</label>
			<select name="role" id="role">
				<option value="1" checked="true">学生</option>
				<option value="2">教师</option>
				<option value="3">管理员</option>
			</select><br>
			<label for="id">用户名:</label>
			<input type="text" id="id" name="id" placeholder="请输入账号"><br>
			<label for="password">密码:</label>
			<input type="password" id="password" name="password" placeholder="请输入密码" ><br>
			<label for="verify_input">验证码:</label>
			<input type="tel" id="verify_input" name="verify_input" placeholder="请输入验证码">
			<a href="javascript:getVerify();" title="点击更换验证码">
				<img id="imgVerify" src="/getVerify" th:src="@{/getVerify}" alt="更换验证码" height="36" width="170" >
			</a>
			<br>
			<div style="clear: both"><h6><a href="#">忘记密码?</a></h6></div><br>
			<input type="submit" id="login" value="登录"/>
		</form>
</div>
</div>
<script type="text/javascript" th:src="@{/easyui/jquery.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/messages.js}"></script>
<script type="text/javascript" th:inline="none">
	$("body").keydown(function() {
		if (event.keyCode == "13") {//keyCode=13是回车键
			$('#login').click();//换成按钮的id即可
		}
	});
	function getVerify() {
		$("#imgVerify").attr("src", '/getVerify?' + Math.random());
	}
	$().ready(function() {
		$("#loginForm").validate({
			rules: {
				id: "required",
				password: {
					required: true,
					minlength: 6
				},
				verify_input: "required"
			},
			messages: {
				id: "请输入用户名",
				password: {
					required: "请输入密码",
					minlength: $.validator.format("最多可以输入 {0} 个字符")
				},
				verify_input: "请输入验证码"
			}
		});
	});
</script>
<script src="js/bootstrap.js" th:src="@{/js/bootstrap.js}"></script>
<script src="js/jquery.dcjqaccordion.2.7.js" th:src="@{/js/jquery.dcjqaccordion.2.7.js}"></script>
<script src="js/scripts.js" th:src="@{/js/scripts.js}"></script>
<script src="js/jquery.slimscroll.js" th:src="@{/js/jquery.slimscroll.js}"></script>
<script src="js/jquery.nicescroll.js" th:src="@{/js/jquery.nicescroll.js}"></script>

<script src="js/jquery.scrollTo.js" th:src="@{/js/jquery.scrollTo.js}"></script>
</body>
</html>
